<template>
    <el-dialog title="提示" :modal-append-to-body="false" :visible.sync="dialogVisible" width="50%" class="openfile">
        <div slot="title"></div>
        <div class="_content">
            <el-row>
                <el-col :span="6">
                    <el-radio-group class="_content-item" v-model="type" size="small">
                        <el-radio label="page" border>
                            <i class="el-icon-files"></i><br />页面
                        </el-radio>
                        <el-radio label="component" border>
                            <i class="el-icon-document"></i><br />组件
                        </el-radio>
                    </el-radio-group>
                </el-col>
                <el-col :span="18">
                    <div class="_resources-tree">
                        <el-tree :data="treeData" :empty-text="emptyText" :props="defaultProps" default-expand-all @node-click="handleNodeClick"></el-tree>
                    </div>
                </el-col>
            </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="intOpen">打 开</el-button>
        </span>
    </el-dialog>
</template>
<script type="text/javascript">
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
import patrol from '../../patrol'
import { forward, reverse, deepCopy } from '../../utils'
//获取需要管理的方法
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('cloud')
export default {
    components: {
        //empty
    },
    data() {
        return {
            type: "page",
            dialogVisible: false,
            emptyText: "您还没有创建页面哦！",
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            dataDetail: '',
            treeData: [],
        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {
        type(val, old) {
            val != 'page' ? this.getComponentsData() : this.getPageData();
        }
    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    mounted() {

        // 获取所有页面
        this.getPageData();
    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {
        ...mapActions(['setPage','retMain']),
        /**
         * 打开文件
         * @return {[type]} [description]
         */
        intOpen() {
            if (this.dataDetail) {
                let data = reverse(this.dataDetail, patrol)
                this.dialogVisible = false;
                this.setPage(data.config);
                this.retMain(data.main);

            }
        },

        // 选择打开的页面
        handleNodeClick(data, node, event) {
            this.dataDetail = '';
            if (this.type == 'page' && node.level == 2) {
                this.getPageDetail(data);
            } else if (this.type == 'component') {
                this.getComponentsDetail(data);
            }
        },

        /**
         * 获取所有页面
         * @return {[type]} [description]
         */
        getPageData() {
            this.treeData = [];
            this.emptyText = "您还没有创建页面哦！"
            this.$cloud.get("build/page_all", ).then(response => {
                if (Array.isArray(response)) {
                    let data = []
                    response.forEach((item, index) => {
                        if (item.children.length > 0) {
                            data.push(item)
                        }
                    })
                    this.treeData = data;
                }
            })
        },

        /**
         * 获取单个页面信息
         * @return {[type]} [description]
         */
        getPageDetail(data) {
            this.$cloud.post("build/page_one", { name: data.name, path: data.path }).then(response => {
                this.dataDetail = response;
            })
        },

        /**
         * 获取所有组件
         */
        getComponentsData() {
            this.treeData = [];
            this.emptyText = "您还没有创建组件哦！"
            this.$cloud.get("build/component_all", ).then(response => {
                if (Array.isArray(response)) {
                    this.treeData = response;
                }
            })
        },

        /**
         * 获取单个组件信息
         * @return {[type]} [description]
         */
        getComponentsDetail(data) {
            this.$cloud.post("build/component_one", { name: data.name }).then(response => {
                console.log("打开页面", response)
                this.dataDetail = response;
            })
        }
    }
}
</script>
<style type="text/css" lang="scss">
.openfile {
    .el-dialog__header {
        padding: 0px;
    }

    .el-dialog__body {
        padding: 0px;
    }

    ._content {
        .el-row {
            border-bottom: solid 1px #dfdfdf;
        }

        .el-col {
            border-right: solid 1px #dfdfdf;
            height: 400px;
        }

        ._content-item {
            width: calc(100% - 40px);
            margin: 20px;
            margin-bottom: 0px;

            .el-radio {
                width: 100%;
                margin: 0px;
                margin-bottom: 20px;
                text-align: center;
                padding-bottom: 15px;
                padding-top: 15px;
            }

            .el-radio__input {
                height: 0px !important;
                display: none;
            }

            .el-radio__label {
                margin: 0px;
                padding-left: 0px;
                font-size: 14px;
            }

            .el-radio.is-bordered,
            .el-radio--small.is-bordered {
                height: 100%;
            }

            .el-radio.is-bordered+.el-radio.is-bordered {
                margin-left: 0px;
            }

            i {
                font-size: 36px;
                margin-bottom: 5px;
            }
        }



        ._resources-tree {
            height: calc(100% - 40px);
            overflow-y: auto;
            padding: 20px;
            // margin: 20px;
        }
    }
}
</style>